<template>

  <div>
    <el-card class="box-card" style="height: 500px; width: 400px; margin: 50px auto; " >
      <div>
        <h3>个人信息</h3>
      </div>
      <el-form class="form-content">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户名：" class="form-label">
              {{ user.username }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="手机：" class="form-label">
              {{ user.phone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="邮箱：" class="form-label">
              {{ user.email }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="性别：" class="form-label">
              {{ user.gender }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="padding-top: 50px;">
        <el-button type="primary" @click="updateUser" style="margin-left: 150px">修改</el-button>
      </div>
    </el-card>
  </div>

  <el-dialog
      title="修改个人信息"
      style="width: 1000px;padding: 40px;"
      v-model="dialogVisible"
      :before-close="handleClose"
  >
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"
                      :disabled="saveUserForm.id != null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input  type="password" v-model="saveUserForm.password"
                       show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio border label="男" value="1" style="margin:0;"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>



</template>

<script setup>
import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
// 获取登录用户的数据
const user=ref(getUser());
//定义变量控制弹窗是否出现
const dialogVisible = ref(false);
const saveUserForm = ref({});
const handleClose = ()=>{
  if(confirm('您确认要关闭本窗口吗?')){
    //关闭弹窗,并清空双向绑定的表单数据
    dialogVisible.value = false;
    saveUserForm.value = {};
  }
}
const updateUser = () => {
  dialogVisible.value = true;
  saveUserForm.value = user.value;
}
//定义修改用户信息的方法
const saveUser = ()=>{
  console.log(saveUserForm.value);
  /* 安装查询字符串框架qs  npm install qs
  使用qs框架将JS对象转为查询字符串格式 name=tom&age=18,注意qs需要导入!!! import qs from "qs"; */
  let data = qs.stringify(saveUserForm.value);
  console.log(data);
  //向后端发送保存员工的请求
  /* 此处传的参数是qs转换后的查询字符串data,注意:使用了查询字符串,后端Controller不用加@RequestBody注解!!! */
  axios.post(BASE_URL+'/v1/user/save',data)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('保存成功!');
          //关闭弹窗,并清空双向绑定的表单数据
          dialogVisible.value = false;
          saveUserForm.value = {};
          //保存成功后要重新加载用户数据!
          user.value = getUser();
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

</script>

<style scoped>

</style>